<template>
  <ArmyMapPanelLayout class="myFrameMapPanelLayout" title="陌生人识别">
    <div class="warehouseMap" :style="serverMapUrl">
      <div class="warehouseMap--legend">
        <div class="warehouseMap--legend__item">
          <div class="icon normal"></div>
          <div class="map">已撤防</div>
        </div>
        <div class="warehouseMap--legend__item">
          <div class="icon warn"></div>
          <div class="map">已布防</div>
        </div>
      </div>
      <div class="warehouseMap--map">
        <WarehouseMapIcon
          @cameralist="showAllWarnPlayerPanel"
          @camera="showWarnPlayerPanel"
          :wearHouse="wearHouse" v-for="wearHouse in wearHouseArr" :key="wearHouse.indexCode" />
      </div>
      <div class="warnpanel" v-if="warnInfo && warnInfo.indexCode" :style="positionStyleStr">
        <!--告警 eventType":"AlarmEvent"-->
        <EventWarn :warnInfo="warnInfo" v-if="warnInfo.eventType === 'AlarmEvent'" @close="closeWarn" @player="showWarnPlayer"></EventWarn>
        <!--巡更/布防/撤防 eventType":"TourEvent"-->
        <PatrolWarn :warnInfo="warnInfo" v-if="warnInfo.eventType === 'TourEvent'" @close="closeWarn" @player="showWarnPlayer"></PatrolWarn>
        <!--刷脸 eventType":"FacePassEvent"-->
        <ShualianWarn :warnInfo="warnInfo" v-if="warnInfo.eventType === 'FacePassEvent'" @close="closeWarn"
                      @player="showWarnPlayer"></ShualianWarn>
      </div>
      <PlayerListPanel :cameraArr="cameraArr" v-if="cameraArr" @close="closePlayer"></PlayerListPanel>
    </div>
  </ArmyMapPanelLayout>
</template>

<script setup>
import PlayerListPanel from '@/views/armyScreen/barracks/change/PlayerListPanel.vue'
import {onMounted, inject} from 'vue'
import {queryArsenalService, baseInfo} from '@/api/armyScreenApi.js'
import ShualianWarn from '@/views/armyScreen/barracks/change/ShualianWarn.vue' // 刷脸 告警
import PatrolWarn from '@/views/armyScreen/barracks/change/PatrolWarn.vue' // 巡更/布防/撤防  告警
import EventWarn from '@/views/armyScreen/barracks/change/EventWarn.vue'
import ArmyMapPanelLayout from "@/views/armyScreen/comp/ArmyMapPanelLayout.vue"; // 事件 告警
import WarehouseMapIcon from "@/views/armyScreen/barracks/change/WarehouseMapIcon.vue";


const warnInfo = inject('warnInfo')

onMounted(() => {
  baseInfoService() // 获取配置的背景图片
  getQueryArsenal()
})

watch(warnInfo, () => {
  if (warnInfo && warnInfo.value) {
    console.log('watch(warnInfo  监听，重新查询仓库信息', warnInfo)
    getQueryArsenal()
    calcWarnPosition(warnInfo) // // 计算告警的位置
  }
})

const positionStyleStr = ref('')
// 计算告警的位置
function calcWarnPosition (warnInfo) {
  const wearHouse = warnInfo.value
  const indexCode = wearHouse.indexCode
  const targetDom = document.getElementById(indexCode)

  if (targetDom) {
    if (warnInfo.value.eventType === 'AlarmEvent') {
      positionStyleStr.value =  'transform: translateY(-50%);position: fixed;left: 0;right: 0; top: 50%;z-index: 99;'
      return
    }
    const offsetTop = targetDom.offsetTop
    const halfHeight = 663 / 2  // 663 是地图的高度
    const halfWidth = 886 / 2  // 663 是地图的 宽度
    const transformArr = []
    let resultStr = ''
    if (offsetTop > halfHeight) { // 如果仓库的位置大于地图一半的高度，则要显示在上部
      resultStr = `position: absolute; left: ${targetDom.offsetLeft}px; top:${targetDom.offsetTop - 36}px;`
      transformArr.push('translateY(-100%)')
    } else { // 如果仓库的位置 不大于 地图一半的高度，则要显示在下部
      resultStr = `position: absolute; left: ${targetDom.offsetLeft}px; top:${targetDom.offsetTop + 36}px;`
    }
    /* 解决 弹窗距离最右边太近了 */
    if (warnInfo.value.eventType === 'FacePassEvent' && (886 - targetDom.offsetLeft) < 464) {
      transformArr.push('translateX(-100%)')
      // resultStr = resultStr + 'transform: translateX(-90%);'
    } else if (warnInfo.value.eventType !== 'FacePassEvent' && (886 - targetDom.offsetLeft) < 287) {
      transformArr.push('translateX(-100%)')
      // resultStr = resultStr + 'transform: translateX(-80%);'
    }
    console.log(transformArr)
    positionStyleStr.value = resultStr + `transform: ${transformArr.join(' ')}`
    if (warnInfo.value.eventType === 'AlarmEvent') {
      positionStyleStr.value =  positionStyleStr.value + 'transform: translateX(0%);left: 0;right: 0;'
    }

  }
  console.log('positionStyleStr.value', positionStyleStr.value)
}

function getPointStyle(wearHouse) {
  // return `left:${wearHouse.x}px;top:${wearHouse.y}px;`
  return `left:${wearHouse.x}%;top:${wearHouse.y}%;display:inline-block;`
}

// 显示播放器
function showAllWarnPlayerPanel(wareHouse) {
  console.log('wareHouse')
  cameraArr.value = wareHouse.cameraList || []
}
// 显示播放器
function showWarnPlayerPanel(wareHouse) {
  // console.log('wareHouse', wareHouse)
  // debugger
  cameraArr.value = wareHouse.cameraList || []
}

const wearHouseArr = ref([])
// 获取军火库列表
function getQueryArsenal() {
  queryArsenalService().then(res => {
    const tempArr = res.data || []
    // 过滤掉 x y数值不存在的数据
    const result = tempArr.filter(item => {
      return item.x && item.y
    })
    console.log('result', result)
    wearHouseArr.value = result
  })
}

// 关闭告警
function closeWarn() {
  warnInfo.value = null
}

// 显示视频播放器的数据
const cameraArr = ref(null)
// 显示告警播放器
function showWarnPlayer(warnInfo) {
  cameraArr.value = warnInfo.cameraList || []
}


// 关闭播放器
function closePlayer() {
  cameraArr.value = null
}

const serverMapUrl = ref('')

// 获取配置的背景图片
function baseInfoService () {
  baseInfo().then(res => {
    console.log(res)
    serverMapUrl.value = `--bgUrl: url(${res.data.mapUrl})`
    // serverMapUrl.value = `--bgUrl: url(https://10.192.195.225/csjzzav/images/changsha_bg.png)`
  })
}

</script>

<style lang="scss" scoped>
.myFrameMapPanelLayout {
  width: 890px !important;
}
.warehouseMap {
  --bgUrl: url('@/assets/images/armyScreen/切图-bg@1x.png');
  width: 886px;
  height: 663px;
  //border: 1px solid red;
  position: relative;
  background-image: var(--bgUrl);
  background-size: cover;

  &--legend {
    width: 183px;
    height: 40px;
    line-height: 40px;
    background: rgba(0, 0, 0, 0.40);
    display: flex;
    position: absolute;
    right: 0;
    top: 0;

    &__item {
      width: 50%;
      display: flex;
      padding-left: 8px;

      .icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url("@/assets/images/armyScreen/ic_门禁点备份.png");
        background-size: cover;
        margin-right: 8px;
        position: relative;
        top: 8px;

        &.normal {
          background-image: url("@/assets/images/armyScreen/wearhouseIcon.png");
        }
      }

      .map {
        flex: 1;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }

  &--map {
    height: 100%;
    width: 100%;
    //border: 1px solid red;
    position: absolute;

  }

  .warnpanel{
    background-image: linear-gradient(269deg, rgba(57,6,6,0.90) 0%, rgba(59,2,2,0.84) 40%, rgba(66,4,4,0.70) 99%);
  }
}
</style>
